<template>
    <div class="flex flex-col gap-8px">
        <div class="text-24px font-700">Your Liquidity</div>
        <div class="text-16px font-400">Remove liquidity to receive tokens back</div>
    </div>
    <div class="w-462px h-192px mt-32px bg-#FAFCFE rounded-8px flex justify-center items-center">
        <div class="flex flex-col items-center gap-24px">
            <el-image class="w-56px" src="/images/u_cloud-check.svg" fit="fill" />
            <div class="w-251px text-16px text-#63707D font-400 text-center">
                Your active V3 liquidity positions will appear here.
            </div>
        </div>
    </div>
    <div
        v-if="!appStore.isConnect"
        class="w-462px h-50px bg-#FF9500 hover:bg-#F38E03 active:bg-#D17A00 rounded-8px flex justify-center items-center cursor-pointer mt-16px"
        @click="appStore.connectWallet"
    >
        Connect Wallet
    </div>
    <div
        v-else
        class="w-462px h-50px bg-#FF9500 hover:bg-#F38E03 active:bg-#D17A00 rounded-8px flex justify-center items-center cursor-pointer mt-16px"
        @click="onAddLiquidity"
    >
        Add Liquidity
    </div>
</template>

<script setup>
import { ElNotification } from 'element-plus'
import { useAppStore } from '@/stores/app'

const appStore = useAppStore()

const onAddLiquidity = () => {
    ElNotification({
        title: '呃',
        message: '哈哈哈，这只是演示',
        type: 'error'
    })
}
</script>
